<template>
    <div class="info" :style="'min-height:' + screeHeight + 'px;'">
        <top-bar title="信息中心"></top-bar>
        <van-search v-model="search" @search="handelSearch" placeholder="搜索" />
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getInfo">
            <div class="list">
                <div v-for="item in list" :key="item.id" class="list-item" @click="goList(item)">
                    <img :src="item.logo" alt="" class="item-img" />
                    <p class="item-title">{{ item.title }}</p>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "info",
    data() {
        return {
            search: "",
            list: [],
            loading: true,
            finished: false,
            page: 0,
            screeHeight: window.innerHeight - 220,
        };
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        handelSearch(val) {
            // console.log(val);
            this.page = 0;
            this.list = [];
            this.getInfo();
        },
        getInfo() {
            this.$api.infoCates({ page: ++this.page, key: this.search }).then((res) => {
                this.loading = false;
                if (res.status_code == 200) {
                    this.list.push(...res.data.data);
                    if (this.list.length >= res.data.total) {
                        this.finished = true;
                    }
                }
            });
        },
        goList(item) {
            this.$router.push({
                path: "/infoList",
                query: {
                    id: item.id,
                },
            });
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.info {
    .van-search__content {
        background-color: #f4f4f4;
    }
    .van-search {
        padding: 18px 15px;
        .van-cell {
            padding: 8px 8px 8px 0;
        }
    }
}
</style>
<style lang="scss" scoped>
@supports (bottom: env(safe-area-inset-bottom)) {
    .info {
        height: calc(100vh - 50px - constant(safe-area-inset-bottom)) !important;
        height: calc(100vh - 50px - env(safe-area-inset-bottom)) !important;
    }
}
.info {
    height: calc(100vh - 50px);
    background-color: #fff;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-left: 0.4rem;
        .list-item {
            margin-bottom: 20px;
            margin-right: 0.4rem;
            width: 4.4rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            .item-img {
                width: 4.4rem;
                height: 3.33rem;
                object-fit: cover;
                border-radius: 10px;
                margin-bottom: 15px;
            }

            .item-title {
                font-size: 14px;
                font-weight: bold;
                color: #333333;
                text-align: center;
                width: 4.4rem;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }
}

@media screen and (min-width: 750px) {
    .info {
        .list {
            .list-item {
                .item-title {
                    font-size: 20px;
                }
            }
        }
    }
}
</style>
